<template>
	<view class="yiqing-container">
		<cu-custom :bgColor="'bg-' + background + '-gradient'" :isBack="true" url="../index/index">
			<block slot="backText">返回</block>
			<block slot="content">信息查询</block>
		</cu-custom>
		<search @handleSearch="handleSearch" placeholder="请输入所在街道,例:南京东路"></search>
		<scroll-view scroll-x class="table-container">
			<view class="table-head">
				<view class="table-head-item" style="width:50px">#</view>
				<view class="table-head-item" style="width:70px">所在区</view>
				<view class="table-head-item">确诊时间</view>
				<view class="table-head-item" style="width:120px">所在(小区)</view>
				<view class="table-head-item" style="width:70px">小区类型</view>
				<view class="table-head-item" style="width:90px">预计解封日期</view>
			</view>
			<view class="table-data">
				<view class="table-cell" v-for="(item, index) in tableData" :key="index">
					<view class="table-data-item" style="width:50px">{{ index + 1 }}</view>
					<view class="table-data-item" style="width:70px">{{ item.area }}</view>
					<view class="table-data-item red">{{ item.sureTime }}</view>
					<view class="table-data-item " style="width:120px">{{ item.street }}</view>
					<view class="table-data-item red" style="width:70px">{{ item.type }}</view>
					<view class="table-data-item green" style="width:90px">{{ item.unsealTime }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import Search from '@/components/Search/index';
import { getYiqing } from '@/api/yiqing.js';
export default {
	components: { Search },
	data() {
		return {
			background: '',
			tableData: []
		};
	},
	onLoad(e) {
		this.background = e.background;
	},
	methods: {
		handleSearch(val) {
			if (val.indexOf('市') != -1) {
				uni.showToast({
					icon: 'none',
					title: '请不要输入行政区，直接输入所在街道'
				});
			}
			getYiqing({ position: val })
				.then(res => {
					const data = res.data;
					this.dealTable(data);
				})
				.catch(err => {
					Toast('查询失败');
				});
		},

		dealTable(str) {
			let text = str.replace(/<[^<>]+>/g, '');
			let arr = text.split('\n');
			arr = arr.filter(item => /[^\s]/.test(item)).filter((item, index) => index > 6 && index % 6 != 0 && index != arr.length - 1);
			let newArr = [];
			arr.forEach((item, index) => {
				if (index < arr.length / 5) {
					newArr.push({
						area: arr[index * 5],
						street: arr[index * 5 + 1],
						sureTime: arr[index * 5 + 2],
						type: arr[index * 5 + 3].replace('推算','',0),
						unsealTime: arr[index * 5 + 4].replace('2022年','',0)
					});
				}
			});
			this.tableData=newArr
		}
	}
};
</script>

<style lang="scss" scoped>
.yiqing-container {
	min-height: 100vh;
	background-color: #fff;
	.table-container {
		box-sizing: border-box;
		padding: 0 15px;
		.table-head {
			white-space: nowrap;
			width: 100%;
			.table-head-item {
				border-bottom: 1px solid #ebeef5;
				color: #909399;
				font-size: 14px;
				line-height: 23px;
				box-sizing: border-box;
				padding: 12px 0;
				text-align: left;
				width: 100px;
				font-weight: bold;
				display: inline-block;
			}
		}
		.table-data {
			white-space: nowrap;
			width: 100%;
			.table-cell {
				.table-data-item {
					border-bottom: 1px solid #ebeef5;
					color: #606266;
					font-size: 14px;
					line-height: 23px;
					box-sizing: border-box;
					padding: 12px 0;
					text-align: left;
					width: 100px;
					display: inline-block;
					&.red {
						color: red;
					}
					&.green {
						color: green;
					}
				}
			}
		}
	}
}
</style>
